<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>简单网页界面</title>
    <style>
        body {
            background-image: url('aa.jpg');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            display: grid;
            grid-template-rows: auto 1fr;
            min-height: 100vh;
        }
    </style>
</head>

<body class="bg-gray-100 font-sans">
    <!-- 导航栏 -->
    <nav class="bg-gray-800 p-4 text-white">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">我的网站</h1>
        </div>
    </nav>

    <!-- 主内容 -->
    <main class="container mx-auto p-8">
        
        <section class="bg-white p-8 rounded-lg shadow-md">
            <h2 class="text-3xl font-bold mb-4">欢迎来到我的网站</h2>
            <p class="text-gray-700 mb-8">这是一个基于WebServer的工业数据采集项目构建的网页界面,在这里你可以实现通过网页直观地看到光线传感器采集到的数据,以及加速度传感器X/Y/Z采集到的数据。
                其中还包含蜂鸣器的以及灯光的开关控制。</p>
            <a href="world.html" class="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700">了解更多</a>
        </section>

        <section class="mt-8">
            <h2 class="text-2xl font-bold mb-4">功能服务</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <i class="fa-solid fa-code text-blue-600 text-3xl mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">传感器数据采集</h3>
                    <p class="text-gray-700">直接将光线传感器数据以及加速度传感器数据采集到,精确到小数点。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <i class="fa-solid fa-palette text-blue-600 text-3xl mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">灯光控制</h3>
                    <p class="text-gray-700">通过按钮控制灯光开关。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md">
                    <i class="fa-solid fa-chart-line text-blue-600 text-3xl mb-4"></i>
                    <h3 class="text-xl font-bold mb-2">蜂鸣器开关</h3>
                    <p class="text-gray-700">通过按钮控制蜂鸣器开关。</p>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white p-4 text-center mt-8">
        <p>&copy; 2025 我的网站. 保留所有权利.</p>
    </footer>
</body>

</html>